<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background: #00BFFF;
			}
		</style>
	</head>
	<body>
		<div id="box">box</div>
		<script type="text/javascript">
			/**
			 * 多指操作
			 * 这个方法，需要获取旋转值、缩放值
			 */
			class Gestures{
				constructor(options) {
					this.el = options.el
					// 存储手指的信息
					this.touch = []
					// 初始化事件
					this.initEvent()
				}
				initEvent(){
					this.el.addEventListener('touchstart',this.start.bind(this))
					this.el.addEventListener('touchmove',this.move.bind(this))
					this.el.addEventListener('touchend',this.end.bind(this))
				}
				start(e){
					e.preventDefault()
					let touches = e.touches
					// if(touches.length<2) return
					Array.from(touches).map(item=>{
						this.touch.push({
							x:item.pageX,
							y:item.pageY
						})
					})
					console.log(this.touch);
				}
				move(e){
					
				}
				end(e){
					
				}
			}
			let box = document.getElementById('box')
			new Gestures({
				el:box,
				start:function(e){
					console.log(e);
				},
				move:function(e){
					
				},
				end:function(e){
					
				}
			})
		</script>
	</body>
</html>
